jQuery Mobileでフォームを作る

はじめに

今回はフォームについてです。 jQuery Mobileでは通常のコントロールの見た目ではなくて、モバイル端末に適した見た目がいくつか用意されています。そのうちのいくつかを使って簡単なフォームを作成してみたいと思います。

基本

フォーム作成は通常のhtmlと同様にformタグで括り、その中にフォームの要素を配置していきます。 通常ラベルとフォーム要素をセットで配置すると思いますが、それらのセットをdivまたはfieldsetなどで括り、data-role=“fieldcontain”を指定します。例えば、名前をテキストインプットで配置するなら次の様になります。

<form action="" method="post">
	<div data-role="fieldcontain">
		<label for="name">名前</label>
		<input type="text" id="name" />
	</div>
</form>

選択要素

単数選択、複数選択の選択形の要素はいくつかの表現が用意されています。男性女性などの2択ならフリップスイッチが使えます。selectタグにdata-role="slider"を指定します。

<div data-role="fieldcontain">
	<label for="gender">性別</label>
	<select name="gender" id="gender" data-role="slider">
		<option value="man">男性</option>
		<option value="woman">女性</option>
	</select>
</div>

複数選択のチェックボックスをリスト風に表示する事が出来ます。

<div data-role="fieldcontain">
	<fieldset data-role="controlgroup">
		<legend>お問い合わせ種別</legend>
		<input type="checkbox" name="type1" id="type1" value="html" />
		<label for="type1">html</label>
		<input type="checkbox" name="type2" id="type2" value="JavaScript" />
		<label for="type2">JavaScript</label>
		<input type="checkbox" name="type3" id="type3" value="css" />
		<label for="type3">css</label>
	</fieldset>
</div>

ボタン

ボタンはtype="button"を指定すれば良いのですが、data-inline="true"で横並びにする事が出来ます。

<input type="button" value="クリア" data-inline="true" id="clearBtn" />
<input type="button" value="送信" data-inline="true" />

フォームのクリア

キャンセルボタンにフォームのクリア機能を付けてみます。 テキスト入力はvalueを""で初期化をすれば良いですが、独自の見た目になっている入力要素については、値の初期化を行った後にリフレッシュさせる必要があります。

/* テキスト入力形はvalueに""を設定する */
$("input[type='text']").attr("value", "");
$("textarea").attr("value", "");

/* check boxの場合は、チェックされているものを外して、リフレッシュする */
$("input[type='checkbox']").attr("checked", false).checkboxradio("refresh");

/* フリップスイッチの場合も初期値に戻して、リフレッシュさせる */
var mySlider = $("select#gender");
mySlider[0].selectedIndex = 0;
mySlider.slider("refresh");

まとめ

動作は次の様になります。

フォームを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

今回作ったソースは以下の通りです。(JavaScriptとページ部分のみ)
フォームについては他にもカスタマイズされた見た目があるのでフォームギャラリー - jQuery Mobile 日本語リファレンスのページを参照してみてください。

<script type="text/javascript">
	$(function(){
		$("#cancelBtn").click(function(){
			/* check box */
			$("input[type='checkbox']").attr("checked", false).checkboxradio("refresh");
			$("input[type='radio']").attr("checked", false).checkboxradio("refresh");
			
			/* slider */
			var mySlider = $("select#gender");
			mySlider[0].selectedIndex = 0;
			mySlider.slider("refresh");
			
			/* text */
			$("input[type='text']").attr("value", "");
			$("textarea").attr("value", "");
		});
	});
</script>

<div data-role="page" id="form">
	<div data-role="header" data-position="fixed">
		<h1>form</h1>
	</div>
	<div data-role="content">
		<h2 id="toc-6">お問い合わせ</h2>
		<form action="" method="post">
			<div data-role="fieldcontain">
				<label for="name">名前</label>
				<input type="text" id="name" />
			</div>
			<div data-role="fieldcontain">
				<label for="gender">性別</label>
				<select name="gender" id="gender" data-role="slider">
					<option value="man">男性</option>
					<option value="woman">女性</option>
				</select>
			</div>
			<div data-role="fieldcontain">
				<fieldset data-role="controlgroup">
					<legend>お問い合わせ種別</legend>
					<input type="checkbox" name="type1" id="type1" value="html" />
					<label for="type1">html</label>
					<input type="checkbox" name="type2" id="type2" value="JavaScript" />
					<label for="type2">JavaScript</label>
					<input type="checkbox" name="type3" id="type3" value="css" />
					<label for="type3">css</label>
				</fieldset>
			</div>
			<div data-role="fieldcontain">
				<label for="comment">ご自由にどうぞ!!</label>
				<textarea id="comment"></textarea>
			</div>
			
			<input type="button" value="クリア" data-inline="true" id="clearBtn" />
			<input type="button" value="送信" data-inline="true" />
		</form>
	</div>
	<div data-role="footer" data-position="fixed">
		<h4>form</h4>
	</div>
</div>